<!--
  * @Description: 招聘-我的
  * @Author: rcc
  * @Date: 2024-08-08 11:40:04
  * @FilePath: /rc-recruitment/pages/tab-page/hiring-mine/hiring-mine.vue
-->

<template>
  <view class="page">
    <up-navbar
      title="我的"
      placeholder
      :titleStyle="titleStyle"
      bgColor="#1269FF">
      <template #left>
        <view class="flex" />
      </template>
    </up-navbar>

    <view class="top-view flex-d-t p-h24 p-t30">
      <view class="flex-r flex-self-end" style="z-index: 2" @click="logout">
        <image class="square-26" src="@/static/images/mine/switch.png" />
        <text class="m-l10 text-400-226">切换求职者</text>
      </view>

      <image class="avatar m-t30" :src="userInfo.avatar" mode="aspectFill" />

      <view class="flex m-t16">
        <text class="text-700-238">{{ userCompany.duties }}</text>

        <view class="auth-view flex m-l10 p-h6">
          <image class="auth-bg" src="@/static/images/mine/auth-bg.png" />

          <view class="relative flex-sb">
            <image class="square-26" src="@/static/images/mine/auth.png" />
            <text class="text-400-224">{{ isHiring ? '已认证' : '未认证' }}</text>
          </view>
        </view>
      </view>

      <text class="m-t20 text-700-230">{{ userCompany.title }}</text>

      <image class="user-bg" src="@/static/images/mine/user-bg.png" mode="widthFix" />
    </view>

    <LinksView />
  </view>
</template>

<script lang="ts" setup>
  import LinksView from './components/links.vue'
  import { useUserStore } from '@/stores/user'

  const titleStyle = {
    'color': '#fff',
    'font-size': '34rpx',
    'font-weight': 'bold',
  }

  const { userInfo, userCompany, isHiring } = useUserStore()

  const logout = () => {
    uni.removeStorageSync('token')

    uni.reLaunch({ url: '/pages/user/role/role' })
  }
</script>

<style lang="scss" scoped>
	.top-view {
		position: relative;
		height: 460rpx;
		background-color: $bg-color-2;

		.user-bg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 1;
		}

		.auth-view {
			position: relative;
			width: 119rpx;
			height: 38rpx;

			.auth-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: $bg-color-1;
	}
</style>
